<template>
  <!-- 微信分享红包记录页面 -->
  <div class="container">
    <!-- 填充位置-->
    <div class="logRedPacket-color"></div>
    <!-- 微信分享红包记录 -->
    <div class="logRedPacket">
      <div>
        <ul>
          <li class="logRedPacket-item" v-for="(item,index) in myActivityRedPacketList" :key="index" @click="query_more_log(item.happen_time)">
            <p><img src="../../../static/img/activityRedPacket/logRedPacketLcon.png"/></p>
            <p>
              <span class="logRedPacket-item-ul-li-p-s1">恭喜获得<span class="logRedPacket-item-ul-li-p-s1-s">{{item.money}}元</span></span><br/>
              <span class="logRedPacket-item-ul-li-p-s2">{{item.happen_time}}</span>
            </p>
            <p v-if="item.state==-1"><img src="../../../static/img/activityRedPacket/logRedPacketStateUnderway.png"/></p><!--进行中-->
            <p v-if="item.state==0"><img src="../../../static/img/activityRedPacket/logRedPacketStateExpired.png"/></p><!--已过期-->
            <p v-if="item.state==1"><img src="../../../static/img/activityRedPacket/logRedPacketStateCanExtract.png"/></p><!--可提现-->
            <p v-if="item.state==2"><img src="../../../static/img/activityRedPacket/logRedPacketStateAlreadyExtract.png"/></p><!--已提现-->
          </li>
        </ul>
      </div>
      <div class="logRedPacket-extract" @click="logRedPacket_extract()">
        <img src="../../../static/img/activityRedPacket/logRedPacketExtract.png" />
      </div>
    </div>

    <!-- 提示弹框 -->
    <div class="toast" v-show="toast_control">
      <div class="toast-container">
        <div class="close" @click="close_toast()"></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  // import {getCookie, setCookie,authorLogin} from "../../utils/util";
  export default{
    data(){
      return {
        toast_control: false,
        toast_title:'',
        myActivityRedPacketList:[],
      }
    },
    created:function () {
      this.$emit('public_footer',false);//隐藏公用底部
    },
    mounted:function () {
      this.init_log_redpacket();//调用初始化界面方法
    },
    computed:{
    },
    methods:{
      //初始化界面
      init_log_redpacket(){
          var userID = this.$cookies.get("user_id") || localStorage.getItem("user_id") || 10199;
          //获得我的所有红包
          this.$axios.get( '/api/common/v1/activityRedPacket/myActivityRedPacketList?share_userid='+userID,{
            params: {

            }
          }).then((res) => {

            this.myActivityRedPacketList=res.data
          }).catch((error) => {
            console.log(error);
          });

      },
      //查看红包详细记录
      query_more_log(happenTime){
          var userID = this.$cookies.get("user_id") || localStorage.getItem("user_id") || 10199;
        //获得初始化详细记录的参数
        this.$axios.get( '/api/common/v1/activityRedPacket/initGetActivityRedPacket?share_userid='+userID+'&happen_time='+happenTime,{
          params: {

          }
        }).then((res) => {
          //跳转到红包详细记录页面
          this.$router.push({ path: '/ShareRedPacket?happenTime='+ res.data.happenTime
          + '&randomRedPacket=' +res.data.randomRedPacket
          + '&shareRedPacketUserNumber='+ res.data.shareRedPacketUserNumber});
        }).catch((error) => {
          console.log(error);
        });
      },
      //红包提现
      logRedPacket_extract(){
          var userID = this.$cookies.get("user_id") || localStorage.getItem("user_id") || 10199;
        //红包提现
        this.$axios.get( '/api/common/v1/activityRedPacket/extractMoneyInActivityRedPacket?share_userid='+userID,{
          params: {

          }
        }).then((res) => {
          this.toast_control = true;
          this.toast_title=res.msg;
        }).catch((error) => {
          console.log(error);
        });
      },
      //关闭弹窗
      close_toast() {
        this.toast_control = false;
      },
    },
  }
</script>

<style scoped>

  .container {  }
  .logRedPacket {  position: relative;  margin: 0.5rem auto 0;  width: 98%;     }
  /*.logRedPacket-color{  height: 1rem;  margin: 0 auto;  background:#fff;  background-size: 100%;  }*/
  .logRedPacket-item {  font-size: 0.15rem;  color: #2f2d1a;  overflow: hidden;border: 2px solid rgb(238,238,238); background-color: #fff;   border-bottom-color: rgb(238,238,238);border-top-color:rgb(238,238,238);border-radius: 8px; }
  .logRedPacket-item p:nth-child(1) {  padding: -0.05rem 0;  float: left;  width: 30%;}
  .logRedPacket-item p:nth-child(1) img{ width: 60%;}
  .logRedPacket-item p:nth-child(2){  padding: 0.25rem 0;  float: left;  width: 50%;font-weight: 500;}
  .logRedPacket-item-ul-li-p-s1{font-weight: 600;}
  .logRedPacket-item-ul-li-p-s1-s{color: #ee4729;}
  .logRedPacket-item-ul-li-p-s2{color: #928a89;font-size:0.15rem; }
  .logRedPacket-item p:nth-child(3) {  padding: 0.15rem 0;  float: left;  width: 20%;}
  .logRedPacket-item p:nth-child(3) img{width: 70%;}
  ul li{list-style-type: none;}
  .logRedPacket-extract{border-radius: 1.2rem;width: 1.2rem;height: 1.2rem;position: fixed;top: 75%;right: 5%;z-index: 999;}
  .logRedPacket-extract img{width: 100%;}
  .toast{  position: fixed;  top: 50%;  left: 50%;  z-index: 20000;  transform: translate(-50%, -50%);  width: 70%;  background: #fff;  border-radius: 0.3125rem;  padding: 0.3125rem;  background-color: rgb(252, 244, 224);  }
  .toast-container {  position: relative;  width: 100%;  height: 100%;  border: 1px dotted #fccc6e;  }
  .close{  position: absolute;  top: -0.5rem;  right: -0.5rem;  width: 0.8rem;  height:0.8rem;  background: url("../../../static/img/luckyDraw/close_store.png") no-repeat center top;  background-size: 100%;  }
  .toast-title {   font-size: 0.3rem;  color: #fc7939;  text-align: center;  }
  .toast-btn {  display: flex;  align-items: center;  justify-content: center;  margin-bottom: 0.9375rem;  }
  .toast-btn div {  background-image: -moz-linear-gradient(-18deg, rgb(242, 148, 85) 0%, rgb(252, 124, 88) 51%, rgb(252, 124, 88) 99%);  }
</style>
